<template>
	<view class="home-container">
		 <view class="status_bar">
		  <!-- 这里是状态栏 -->
		  </view> 
				 
		<view>
			<view  class="home-header">
				<view class="c-header ownClass">
					  <a class="c-nav-text" >重庆
					   <view class="c-nav-text-icon">
						  <image mode="aspectFit" src="//p0.meituan.net/travelcube/45c79a92755b54adc9dc1c4682b123b3201.png"></image>
						  </view>
						</a>
					  
					  <a class="c-search" href="/">
						 <view class="c-search-text">请输入商家名、品类或者商圈</view>
						 <view class="c-search-btn">搜索</view>
					  </a>
					  <a class="c-normal" href="/">
					    <view class="myview">
					      <image mode="aspectFit" src="//p0.meituan.net/webimeituan/f4e13fc34c4dd92cb6e6fbe9135aa8b31510.png" alt=""></image>
					    </view>
					 </a>
				</view>				
			</view>
			
		</view>
		
		<!-- 九宫格 -->
		<view class="category-container">		
		   <view class="category-item" v-for="item in categoryList" v-bind:key="item.id">
			   <image mode="aspectFit" :src="item.picture" class="category-item-img"></image>
			  <view class="category-item-text">{{item.name}}</view>
		  </view>		
			
		  <view class="category-background-linear"></view> 
		</view>
	   
	    <!-- 显示商家列表 -->
	    <view class="home-feeds-container">
			abc
			<van-button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">主要按钮</van-button>
	 
		</view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList: [
					{
						id:1,
						name:'美食团购',
						picture:'//p0.meituan.net/webimeituan/421b2ac47bbaba9093b8170795dfcead14272.png'
					},
					{
						id:2,
						name:'酒店',
						picture:'//p0.meituan.net/webimeituan/9faab44f20643ad716a822c0bb8bd6ea4650.png'
					},
					{
						id:3,
						name:'娱乐',
						picture:'//p0.meituan.net/webimeituan/1e40f5dc8e1d2e1e1fdc82048ec844026217.png'
					},
					{
						id:4,
						name:'电影',
						picture:'//p0.meituan.net/webimeituan/fb7065f359485d456aa8191231ee50fa5340.png'
					},
					{
						id:5,
						name:'KTV',
						picture:'//p0.meituan.net/webimeituan/6a97219959cff002efbb6c084d62ae764380.png'
					},
					{
						id:1,
						name:'美食团购',
						picture:'//p0.meituan.net/webimeituan/421b2ac47bbaba9093b8170795dfcead14272.png'
					},
					{
						id:2,
						name:'酒店',
						picture:'//p0.meituan.net/webimeituan/9faab44f20643ad716a822c0bb8bd6ea4650.png'
					},
					{
						id:3,
						name:'娱乐',
						picture:'//p0.meituan.net/webimeituan/1e40f5dc8e1d2e1e1fdc82048ec844026217.png'
					},
					{
						id:4,
						name:'电影',
						picture:'//p0.meituan.net/webimeituan/fb7065f359485d456aa8191231ee50fa5340.png'
					},
					{
						id:5,
						name:'KTV',
						picture:'//p0.meituan.net/webimeituan/6a97219959cff002efbb6c084d62ae764380.png'
					}					 
				]
			}
		},
		onLoad() {
          setTimeout(function () {
			console.log('开启下拉刷新');
		   }, 1000);
	       uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('开始刷新，加载后台代码....');
			setTimeout(function () {
				//停止刷新操作
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
		 getPhoneNumber(e){
			 console.log(e)
		 }
		}
	}
</script>

<style>
	
	.home-feeds-container {
	    padding: 3.466667vw 3.2vw;
	    background: #f0f0f0;
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-pack: justify;
	    justify-content: space-between;
	    flex-wrap: wrap; 
	}
	
	
	.status_bar {
	        height: 140rpx;
	        width: 100%;
	    }
	
	 .home-container {
	     position: relative;
	     min-height: 100vh;
	     content: "viewport-units-buggyfill; min-height: 100vh";
	 }

   
 
   .c-header {
       display: -webkit-box;
       display: flex;
       -webkit-box-align: center;
       align-items: center;
       position: relative;
       width: calc(100% - 8vw);
       height: 13.3vw;
       box-sizing: content-box;
       padding: 0 4vw;
       background: -webkit-linear-gradient(315deg,#ffd000,#ffbd00);
       background: linear-gradient(135deg,#ffd000,#ffbd00);
       padding-top: constant(safe-area-inset-top);
       padding-top: env(safe-area-inset-top);
       content: "viewport-units-buggyfill; width: calc(100% - 8vw); height: 13.3vw; padding: 0 4vw";
   }
   .ownClass {
       height: 12.8vw!important;
       background: #ffd100!important; 
   }
   
   .c-nav-text {
       display: -webkit-box;
       display: flex;
       -webkit-box-align: center;
       align-items: center;
       flex-wrap: nowrap;
       white-space: nowrap;
        margin-right: 4vw;
       font-size: 3.7vw; 
   } 
   
   .c-nav-text-icon  image{
	   width: 20rpx;
	   height: 20rpx;
   }
  
   
   image {
       content: normal!important;
   }
   
   .c-nav-text view {
       margin-left: 1.3vw;
       width: 2.1vw;
       height: 1.05vw; 
   }
   
   .c-nav-text view image {
       width: 100%;
       height: 100%;
   }
   
   .c-search {
       -webkit-box-flex: 1;
       flex: 1;
       min-width: 13.333333vw;
       display: -webkit-box;
       display: flex;
       -webkit-box-align: center;
       align-items: center;
       position: relative;
       height: 9.066667vw;
       padding: 0 3.5vw;
       border-radius: 4.4vw;
       background-color: #fff;
       font-size: 3.5vw;
       color: #999;
       content: "viewport-units-buggyfill; min-width: 13.333333vw; height: 9.066667vw; padding: 0 3.5vw; border-radius: 4.4vw; font-size: 3.5vw";
   }
   
   .c-search-text {
       -webkit-box-flex: 1;
       flex: 1;
       max-width: 80%;
       line-height: 9.066667vw;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       content: "viewport-units-buggyfill; line-height: 9.066667vw";
   }
   .c-search-btn {
       position: absolute;
       right: 0.8vw;
       top: 0.866667vw;
       width: 13.866667vw;
       height: 7.466667vw;
       display: -webkit-box;
       display: flex;
       -webkit-box-align: center;
       align-items: center;
       -webkit-box-pack: center;
       justify-content: center;
       background: #ffd100;
       border-radius: 3.866667vw;
       opacity: .9;
       font-family: PingFangSC-Regular;
       font-size: 3.733333vw;
       color: #000;
       line-height: 4.8vw;
       font-weight: 400;      
   }
   
   .c-normal {
       width: 40rpx;
       height: 40rpx;
       padding: 3.6vw 0;
       margin-left: 2.7vw;
     
   }
   .c-normal .myview {
       width: 40rpx;
       height: 40rpx;    
   }
   
   .c-normal .myview image {
       width: 100%;
       height: 100%;
   }
   
   .category-container {
       width: 100vw;
       height: 52.4vw;
       padding-top: 0.533333vw;
       background-color: #fff;
       display: -webkit-box;
       display: flex;
       justify-content: space-around;
       flex-wrap: wrap;
   }
   
   .category-item {
       width: 17.6vw;
       height: 17.466667vw; 
   }
   
   .category-item-img {
       width: 17.6vw;
       height: 12.8vw; 
   }
   
   .category-item-text {
       width: 17.6vw;
       height: 4.4vw;
       display: -webkit-box;
       display: flex;
       -webkit-box-align: center;
       align-items: center;
       -webkit-box-pack: center;
       justify-content: center;
       opacity: .8;
       font-size: 3.2vw;
       color: #000;
       letter-spacing: 0;
       text-align: center;
       font-weight: 400;    
   }
 
 .category-background-linear {
     width: 100vw;
     height: 5.333333vw;
     background: -webkit-linear-gradient(top,#ffffff,#f0f0f0);
     background: linear-gradient(to bottom,#ffffff,#f0f0f0); 
 }
</style>
